<template>
  <div class="box">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          type="text"
          v-model="ruleForm.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="captcha">
        <el-input type="text" v-model="ruleForm.captcha"></el-input>
        <div class="tuma">
          <img :src="tuma" alt="" @click="shuaxin" />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import api from '@/api/index.js'
export default {
  data() {
    return {
      tuma: '', // 验证码图片
      key: '', // 验证码key
      ruleForm: {
        username: '',
        password: '',
        captcha: ''
      },
      rules: {
        username: [{ validator: this.checkUsername, trigger: 'blur' }],
        password: [{ validator: this.checkPassword, trigger: 'blur' }],
        captcha: [{ validator: this.checkCaptcha, trigger: 'blur' }]
      }
    }
  },
  created() {
    this.changeCpatcha()
  },
  methods: {
    // 点击图片刷新验证码图片
    shuaxin() {
      this.changeCpatcha()
    },
    // 校验用户名
    checkUsername(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else if (!/^[a-z0-9]\w{4,11}$/.test(value)) {
        callback(new Error('用户名不规范'))
      } else {
        callback()
      }
    },
    // 校验密码
    checkPassword(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!/\w{6,12}/.test(value)) {
        callback(new Error('密码输入不规范'))
      } else {
        callback()
      }
    },
    // 校验验证码
    checkCaptcha(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入验证码'))
      } else {
        callback()
      }
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http
            .post(
              api.getLogin,
              'captcha=' +
                this.ruleForm.captcha +
                '&key=' +
                this.key +
                '&username=' +
                this.ruleForm.username +
                '&password=' +
                this.ruleForm.password
            )
            .then((res) => {
              console.log(res)
              if (res.errNo === 0 && res.message === 'success') {
                this.$router.push('/')
              } else if (res.errText === '图形验证码验证失败') {
                this.$message({
                  type: 'error',
                  message: '验证码输入错误,请重新输入'
                })
                this.changeCpatcha()
                this.ruleForm.captcha = ''
              } else {
                this.$message({
                  type: 'error',
                  message: '用户名或密码错误,请重新输入'
                })
                this.changeCpatcha()
                this.ruleForm.username = ''
                this.ruleForm.password = ''
                this.ruleForm.captcha = ''
              }
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 获取验证码图片
    changeCpatcha() {
      this.$http.get(api.getCaptcha).then((res) => {
        this.tuma = res.img
        this.key = res.key
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 450px;
  margin: 50px auto 0;
}
.tuma {
  margin: 10px;
}
</style>
